import React, { Component } from 'react'
import { Image,List,Button,Empty } from 'antd-mobile'
import {imgPre} from "../../request/http"
import './Shop.less'
import {filterPrice} from "../../filters/index"
import Header from '../../components/Header/Header'
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import { actions,getSl,getAllCheck,getIsshow,getMoney } from '../../store/modules/Shop'

class Shop extends Component {
    componentDidMount() {
        let {
          shop: { requestSL },
        } = this.props;
        //请求列表
        requestSL();
      }
    render() {
        let {shoplist,allCheck,money,isshow,shop:{del, add, sub, changeOne,changeAll,xiugai}}=this.props

        return (
            <div>
                <Header title="购物车" back></Header>
                <div className="shop">
                    <div className="checkc">
                        <input type="checkbox" onChange={(e)=>changeAll(e)} checked={allCheck}/>
                        <Button onClick={(e)=>xiugai()}>操作</Button>
                    </div>
                    <div>
                    {
                        shoplist.length>0?<div>
                            {shoplist.map((item,index) => (
                            <List.Item
                                onClick={key=>{this.props.history.push("/Detail/"+item.id)}}
                                key={index}
                                prefix={
                                    <Image
                                    src={imgPre+item.img}
                                                fit='cover'
                                                width={80}
                                                height={80}
                                                />
                                            }
                                            description={item.description}
                                            >
                                            <div onClick={e=>e.stopPropagation()}>
                                                <input type="checkbox" onChange={(e)=>changeOne(e,index)} checked={item.checked}/>
                                            </div>
                                            {item.goodsname}
                                            <div>
                                                <span>价格：{item.price}</span>
                                            </div>
                                            <Button color='danger' style={{display:isshow?"block":"none"}} onClick={(e)=>del(item.id)}>删除</Button>
                                            <div className="money">
                                                <button onClick={(e)=>sub(item.id,item.num)}>-</button>
                                                <span>{item.num}</span>
                                                <button onClick={(e)=>add(item.id)}>+</button>
                                            </div>
                                            </List.Item>
                                        ))
                                    }
                        </div>: <Empty description='暂无数据' />
                    }
                    </div>
                    
                </div>
                <div className="jiesuan">
                    <div>
                        {money?"￥"+filterPrice(money):"￥0.00"}
                    </div>
                    <Button>结算</Button>
                </div>
            </div>
        )
    }
}

//取数据
const mapStateToProps = (state) => {
    return {
        shoplist:getSl(state),
        allCheck:getAllCheck(state),
        money:getMoney(state),
        isshow:getIsshow(state)
    };
}

//取方法
const mapDispatchToProps = (dispatch) =>{
    return {
        shop:bindActionCreators(actions,dispatch)
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Shop)
